<cfoutput>
	<div class="Answer-checkbox" style="display: none;">
		<p>
			Please fill in the details. There must be at least 2 checkboxes and a maximum of 10
		</p>
		<script type="text/javascript">
			
			function RemoveCB(cbID){
				if($('##cbcount').val() > 2)
				{
					$('##row-'+cbID).remove();
					var new_cbcount = parseInt($('##cbcount').val(), 10) - 1;
					$('##cbcount').val(new_cbcount);
					redrawShadows();
				}
				else
				{
					alert("You must have atleast 2 checkboxes");
				}
			}
			
			function AddCB(){

				if($('##cbcount').val() < 10)
				{
					//get checkbox value
					var new_cbcount = parseInt($('##cbcount').val(), 10) + 1;

					//to keep it clean i've split up the append
					//input
					var input = "<input type='Textbox' name='cb"+new_cbcount+"' id='cb"+new_cbcount+"'>";

					//the top of the button
					var remove_button_top = "<button class='ui-state-default ui-corner-all' onclick='RemoveCB(\""+new_cbcount+"\");' name='btnRemoveCB' id='btnRemoveCB' type='Button' value='Remove Checkbox'>";
					//the content of the button
					var remove_button_content ="Remove Checkbox";
					
					//the bottom of the button
					var remove_button_bottom ="</button>";
					
					//create a button
					var button = remove_button_top + remove_button_content + remove_button_bottom;

					//apend the above content  jquery appends the content as the last child
					$('##checkboxes').append("<tr id='row-"+new_cbcount+"' name='row-"+new_cbcount+"'><td>"+input+"</td><td>"+button+"</td></tr>");
					
					//update the cb count
					$('##cbcount').val(new_cbcount);
					
					redrawShadows();
				}
				else
				{
					alert("You cannot add any more checkboxes");
				}
			}
		</script>
		
		<cfquery datasource="exp" name="cbInfo">
			SELECT cb.*
			FROM CheckboxGroup cbgrp, Checkbox cb
			WHERE cbgrp.id = #InfoID#
			AND cbgrp.id = cb.CheckboxGroupID
			ORDER BY cb.id
			
		</cfquery>
	
		
		
		<input type="hidden" value="#cbInfo.recordcount#" name="cbcount" id="cbcount">
		<input type="hidden" value="#InfoID#" name="cbgrpid" id="cbgrpid">
		<table name="checkboxes" id="checkboxes">
			<cfset index = 1>
			<cfloop query="cbInfo">
				<tr id='row-#index#'>
					<td>
						<input type="Textbox" value="#Text#" name="cb#index#" id="cb#index#">
					</td>
					<td>
						<button class='ui-state-default ui-corner-all' onclick='RemoveCB("#index#");' type='Button' value='Remove Checkbox'>
							Remove Checkbox
						</button>
					</td>
				</tr>
				<cfset index += 1>
			</cfloop>
		</table>
		<button class="ui-state-default ui-corner-all" onclick="AddCB();" name="btnAddCB" id="btnAddCB" type="button" value="Add Checkbox">
			Add Checkbox
		</button>
	</div>
</cfoutput>
